<template>

    <ul >
        <li v-for="item in list" :key="item.id" @click="$router.push('/detail/'+item.id)">
            <div>
                <img :src="item.image" alt="" style="width: 100%;">
            </div>

          

            <p>{{ item.title }}</p>
            <p style="color: red;">{{ item.price }}</p>
        </li>
    </ul>



</template>
<script setup>
import request from '@/utils/request'
import { ref, onMounted } from 'vue'
const list = ref([])
onMounted(() => {
    request.get('/list', {
        params: { pagination: 1, pageNum: 40 }

    }).then(res => {
        if (res.data.code == 200) {
            console.log(res.data.data);
            list.value = res.data.data
        }
    })
})
</script>
<style lang="scss" scope>
*{
    margin: 0;
    padding: 0;
}
ul{
    column-count: 2;
    li{
       break-inside: avoid;
    }
}
</style>